{include file="common/head" /}

<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="adname" placeholder="用户名" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
            <select name="rid">
                <option value="">用户角色</option>
                {volist name="role" id="v"}
                <option value="{$v.roleid}">{$v.rolename}{eq name='v.status' value='0'}&nbsp;[已禁用]{/eq}</option>
                {/volist}
            </select>
        </div>

        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status">
                <option value="-1">用户状态</option>
                <option value="1">正常</option>
                <option value="0">禁用</option>
            </select>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
        </div>

    </div>
</form>

<table id="user" lay-filter="user"></table>

<script type="text/html" id="add">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁用" value="{{ d.adid }}" lay-filter="status" {{
           (d.status==1) ? 'checked' : '' }} />
</script>

<script type="text/html" id="info">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="power">权限</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    layui.use(['element', 'table', 'form', 'jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            element = layui.element;

        //第一个实例
        table.render({
            id: 'user',
            elem: '#user',
            method: 'post',
            autoSort: false,
            defaultToolbar: [],
            page: true, //开启分页
            toolbar: '#add',
            url: '{:url("User/index")}', //数据接口
            cols: [[ //表头
                {field: 'adid', title: 'ID', sort: true, fixed: 'left'},
                {field: 'adname', title: '用户名', fixed: 'left'},
                {field: 'status', title: '状态', align: 'center', fixed: 'left', unresize: false, templet: '#status'},
                {field: 'rolename', title: '角色', fixed: 'left'},
                {field: 'create_time', title: '更新时间', fixed: 'left'},
                {field: 'update_time', title: '创建时间', fixed: 'left'},
                {fixed: 'right', title: '操作', align: 'center', toolbar: '#info'}
            ]]
        });


        //触发头部工具栏事件
        table.on('toolbar(user)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    save('{:url("User/save")}?type=add', '添加用户',['400px', '350px']);
                    break;
            }
        });

        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;

            var id = data.adid; //得到节点索引

            if (obj.event === 'power') {
                save('{:url("Role/power")}?type=2&roleid=' + data.rid, '权限', ['655px', '655px']);

            } else if (obj.event === 'edit') {
                save('{:url("User/save")}?type=update&adid=' + id, '编辑用户',['400px', '350px']);

            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.post('{:url("User/del")}', {adid: id}, function (e) {
                        layer.msg(e.msg);
                        if (e.status == 200) {
                            window.setTimeout(function () {
                                obj.del();
                                reload(2);
                                layer.close(index);
                            }, 500);
                        }
                    }, 'json');

                });

            }
        });

        function save(action, title,area) {
            layui.layer.open({
                type: 2,
                title: title,
                content: action,
                area: area,
            });
        }

        //重载表格
        window.reload = function (type = 1, arr = []) {
            if (type == 1) {
                table.reload('user', arr);
            } else {
                table.reload('user', {
                    where: {
                        rid: $('select[name="rid"]').val(),
                        adname: $('input[name="adname"]').val(),
                        status: $('select[name="status"]').val(),
                    },
                    page: {
                        curr: 1
                    }
                });
            }
        }

        //监听状态操作
        form.on('switch(status)', function (obj) {
            var adid = obj.value;
            var status = this.checked ? 1 : 0;// 当前状态值

            $.post('{:url("User/Save")}', {adid: adid, status: status, type: 2}, function (e) {
                layer.msg(e.msg);
                if (e.status == 200) {
                    window.setTimeout(function () {
                        reload(2);
                    }, 500);
                }
            }, 'json');
        });

        //搜索
        form.on('submit(search)', function (data) {

            reload(1, {
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        });

        //排序
        table.on('sort(user)', function (obj) {
            reload(1, {
                initSort: obj,
                where: {
                    field: obj.field, //排序字段
                    order: obj.type, //排序方式
                    rid: $('select[name="rid"]').val(),
                    status: $('select[name="status"]').val(),
                    adname: $('input[name="adname"]').val(),
                }
            });

        });

    });
</script>
{include file="common/foot" /}